<template>
	<div id='page2'>
		<!-- 眉头 -->
		<div class='all_title'>
			<div class='intro'>
				<p>个人</p>
				<p>项目</p>
				<p class='other'>介绍</p>
			</div>
			<div class='english'>
				Personal project introduce
			</div>
			<!-- 向左向右按钮  -->
			<div class='lf_btn'>
				<div class='lf' @click='left'>
					&lt;
				</div>
				<div class='lf' @click='right'>
					&gt;
				</div>
			</div>
		</div>
		<div class='main'>
			<div class='project_item' v-for='(item,index) in main' @mouseover="moveIn(index)" @mouseout='moveOut(index)' :key='index'>
				<!-- 图片 -->
				<div class='img'>
					<img :src="item.img" alt="加载中...">
				</div>
				<!-- 文字表述 -->
				<div class='detail_text'>
					<p class='title'>{{ item.title }}</p>
					<p class='sub'>{{ item.subText }}</p>
					<p class='des'>{{ item.describe }}</p>
					<div class='hovor'>
						查看详情
						<IMG src=''></IMG>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		name: 'page2',
		data() {
			return {
				isShow0: true,
				index: 0,
				main: [{
					img: require('../../assets/project/featured_1.jpg'),
					title: '程序员社交类网站',
					subText: '开发性质：个人开发',
					describe: '在本网站中。程序员们可以通过查看博文和大牛进行思维的碰撞；假若您的电脑本地磁盘充满了各种Jar包显得非常凌乱的时候，那么您大可放心的将您的本地Jar包上传上来，我们为您保管！'
				}, {
					img: require('../../assets/project/featured_2.jpg'),
					title: '净衣坊后台管理',
					subText: '开发性质：个人开发',
					describe: '净衣坊项目后台，为配合微信端净衣坊微信小程序使用。最终目的是完成干洗衣物线上交易。净衣坊后台提供给哪些入驻平台的干洗商户使用，在这里他们可以随时随地的查看订单等详情！'
				}],
				allMain: []
			}
		},
		created() {
			this.initgetAllProject();
		},
		methods: {
			// 初始化页面交互后台获取所有项目
			initgetAllProject: function() {
				var that = this;
				this.$axios.get('https://www.mokeylife.cn/MyHomePage/myproject.do')
					.then(function(response) {
						console.log(response);
						// 数据正确
						if (response.data.code == 'success') {
							that.allMain = response.data.data;
							that.init();
						} else {
							that.$notify.error({
								title: '错误',
								message: '网络错误，请重试！'
							});
						}
					})
					.catch(function(error) {
						that.$notify.error({
							title: '错误',
							message: '网络错误，请重试！'
						});
					});
			},

			// 初始化数组
			init: function() {
				if (this.index >= this.allMain.length) this.index = 0;
				this.main.length = 0;
				for (var i = this.index; i < 3; i++) {
					this.main.push(this.allMain[i]);
				}
			},

			// 弹出消息
			popInfo: function(msg) {
				this.$notify.error({
					title: '消息',
					message: msg
				});
			},

			// 向左点击按钮
			left: function() {
				if (this.index - 1 < 0) {
					this.popInfo('这已经是第一条数据了！');
					return false;
				} else {
					this.index--;
					this.main = [];
				}

				for (var i = this.index * 3; i < this.index * 3 + 3; i++) {
					this.main.push(this.allMain[i]);
				}
			},

			// 向右点击按钮
			right: function() {
				if (this.index + 1 >= this.allMain.length / 3) {
					this.popInfo('这已经是最后一条数据了！');
					return false;
				} else {
					this.index++;
					this.main = [];
				}

				// 当前长度
				var len = 0;
				if (this.allMain.length - this.index * 3 >= 3)
					len = 3;
				else
					len = this.allMain.length - this.index * 3;

				for (var i = this.index * 3; i < this.index * 3 + len; i++) {
					this.main.push(this.allMain[i]);
				}
			},

			// 触控
			moveIn: function(index) {
				var hober = document.getElementsByClassName('detail_text')[index].lastElementChild;
				hober.style.opacity = 1.0;
			},

			// 触控
			moveOut: function(index) {
				var hober = document.getElementsByClassName('detail_text')[index].lastElementChild;
				hober.style.opacity = 0.0;
			}
		}
	}

</script>
<style scoped="true">
	* {
		margin: 0px;
		padding: 0px;
	}

	#page2 {
		top: 170%;
		width: 71%;
		margin-left: 27%;
		margin-top: 160px;
		padding-top: 20px;
		position: absolute;
		padding-bottom: 80px;
		font-family: '微软雅黑';
		border-bottom: 1px solid #EEEEEE;
	}

	.other {
		color: #45489A;
		font-weight: bolder;
	}

	.all_title {
		width: 100%;
		height: 120px;
		margin-bottom: 15px;
		display: flex;
		flex-direction: row;
	}

	.english {
		color: #343434;
		font-size: 15px;
		line-height: 120px;
		font-family: 'Open Sans', sans-serif;
		margin-right: auto;
	}

	.intro {
		color: #232323;
		font-size: 32px;
		padding-left: 10px;
		margin-right: 50px;
		border-left: 3px blue solid;
	}

	.lf_btn {
		justify-content: flex-end;
		display: flex;
		margin-top: 35px;
		flex-direction: row;
	}

	.lf_btn .lf {
		width: 50px;
		height: 50px;
		margin-right: 15px;
		text-align: center;
		line-height: 50px;
		color: #232323;
		background-color: #EEEEEE;
		font-size: 36px;
		transition: all 0.5s;
	}

	.lf:hover {
		color: #FFFFFF;
		background-color: #45489A;
	}

	.main {
		clear: both;
		width: 100%;
		display: flex;
		overflow: hidden;
		flex-direction: row;
	}

	.project_item {
		width: 30%;
		margin-left: 2%;
		overflow: hidden;
	}

	.project_item .img {
		width: 100%;
		height: 350px;
	}

	.hovor {
		width: 100%;
		height: 30px;
		line-height: 30px;
		color: #FFFFFF;
		text-align: center;
		transition: all 0.5s;
		margin-top: 20px;
		opacity: 0.0;
		background-color: #45489A;
	}

	.project_item .img img {
		width: 100%;
		height: 340px;
		margin-bottom: 10px;
	}

	.detail_text .title {
		margin-top: 20px;
		margin-bottom: 5px;
		font-size: 21px;
		font-weight: 600;
		color: #232323;
		letter-spacing: 0.5px;
	}

	.detail_text .sub {
		font-size: 15px;
		font-weight: 600;
		color: #7a7a7a;
		letter-spacing: 0.5px;
		margin-bottom: 12.5px;
	}

	.detail_text .des {
		font-size: 13px;
		height: 96px;
		color: #7a7a7a;
		line-height: 24px;

		overflow: hidden;
		position: relative;
		text-overflow: ellipsis;
	}

	.detail_text .des::after {
		right: 0;
		bottom: 0;
		content: "...";
		font-weight: bold;
		position: absolute;
		padding: 0 20px 1px 45px;
		background: url(../../assets/ellipisbg/ellipsis_bg.png) repeat-y;
	}

</style>
